<template>
	<u-navbar title="失物招领" :autoBack="true"
		titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-0.5%;font-size:30rpx;" leftIconSize="30rpx"
		leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<view class="main">
		<up-text text="丢/拾东西了QAQ" type="primary" size="35rpx" align="center" bold></up-text>
		<view class="content">
			<u--form labelPosition="left" :model="lostForm" :rules="rules" ref="formRef" labelStyle="font-size:30rpx;">

				<u-form-item prop="title" ref="item1">
					<text style="color: #3c9cff;">物品*：</text>
					<u--input v-model="lostForm.title" customStyle="height:80rpx;" prefixIcon="gift-fill"
						prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx" clearable border="bottom"
						maxlength="10"></u--input>
				</u-form-item>
				<u-form-item prop="status" ref="item2">
					<text style="color: #3c9cff;">类型*：</text>
					<u-radio-group v-model="lostForm.status">
						<u-radio customStyle="margin-bottom:8rpx;padding:8rpx" v-for="(item, index) in typeList"
							:key="index" :label="item.label" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item prop="description" ref="item3">
					<text style="color: #3c9cff;">描述*：</text>
					<u--textarea v-model="lostForm.description" autoHeight border="bottom" placeholder="请输入内容"
						maxlength="100" count></u--textarea>
				</u-form-item>
				<u-form-item prop="photo" ref="item4">
					<text style="color: #3c9cff;">照片：</text>
					<u-upload maxCount="5" :fileList="fileList1" name="1" @afterRead="afterRead" @delete="deletePic"
						multiple :previewFullImage="true"></u-upload>
				</u-form-item>
				<text style="color: #3c9cff;">联系方式：</text>

				<u-form-item prop="contactQq" ref="item5">
					<text style="color: #3c9cff;">QQ：</text>
					<u--input v-model="lostForm.contactQq" customStyle="height:80rpx;" prefixIcon="qq-fill"
						prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx" clearable
						border="bottom"></u--input>

				</u-form-item>
				<u-form-item prop="contactWx" ref="item6">
					<text style="color: #3c9cff;">微信*：</text>
					<u--input v-model="lostForm.contactWx" customStyle="height:80rpx;" prefixIcon="weixin-fill"
						prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx" clearable
						border="bottom"></u--input>

				</u-form-item>
				<u-form-item prop="contactPhone" ref="item7">
					<text style="color: #3c9cff;">手机号：</text>
					<u--input v-model="lostForm.contactPhone" customStyle="height:80rpx;" prefixIcon="phone-fill"
						prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx" clearable
						border="bottom"></u--input>

				</u-form-item>

			</u--form>
			<up-text text="注意*为必填项" type="error" align="right" size="18rpx" bold></up-text>
			<u-button type="primary" text="点击发布" size="large" @click="sendLost"
				customStyle="margin-top:50rpx;margin-bottom:20rpx"></u-button>
		</view>

	</view>
	<!-- 添加后的提示 -->
	<u-modal :show="addShow" :content="lostStore.status.msg" @confirm=" closeAddShow"></u-modal>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		useLostStore
	} from "@/stores/lostStore.js"
	const lostStore = useLostStore()
	import moment from 'moment';
	const user = ref({

	})
	const lostForm = reactive({
		title: "",
		description: "",
		status: 0,
		contactPhone: "",
		contactQq: "",
		contactWx: "",
	})
	const typeList = reactive([{
		label: "丢东西",
		name: 0
	}, {
		label: "捡东西",
		name: 1
	}])
	const formRef = ref()
	//添加成功的提示
	const addShow = ref(false)

	function closeAddShow() {
		addShow.value = false
		if (lostStore.status.code == "200") {
			uni.navigateBack({
				delta: 1
			});
		}

	}
	//发布失物招领
	function sendLost() {
		formRef.value.validate().then(async (res) => {
			//表单验证通过
			lostForm.addTime = moment().format('YYYY-MM-DD HH:mm:ss')
			console.log(lostForm.addTime)
			lostForm.userId = user.value.userId;
			lostForm.schoolId = user.value.schoolId
			// for (let i = 0; i < fileList1.value.length; i++) {
			// 	await lostStore.addLost(fileList1.value[i].url, lostForm)
			// }
			fileList1.value.forEach((p) => {
				p.name = "files",
					p.uri = p.url
			})
			await lostStore.addLost(fileList1.value, lostForm)
			addShow.value = true
		}).catch(errors => {
			//表单验证失败

		})
	}

	onMounted(() => {
		user.value = JSON.parse(uni.getStorageSync("user"))
	})
	const rules = reactive({
		title: {
			type: 'string',
			required: true,
			message: '请输入物品名称，最大长度不超过10',
			trigger: ['blur', 'change'],
		},
		description: {
			type: 'string',
			required: true,
			message: '请输入描述信息',
			trigger: ['blur', 'change'],
		},
		photo: {
			type: 'string',
			required: false,
			message: '请选择照片',
			trigger: ['blur', 'change'],
		},
		contactPhone: [{
				type: 'string',
				required: false,
				message: '请输入手机号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^1[3456789]\d{9}$/,
				// 正则检验前先将值转为字符串
				required: false,
				message: '手机号格式错误',
				trigger: ['blur', 'change']
			}
		],
		contactQq: [{
				type: 'string',
				required: false,
				message: '请输入QQ号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^[1-9][0-9]{4,10}$/,
				// 正则检验前先将值转为字符串
				required: false,
				message: 'QQ号格式错误',
				trigger: ['blur', 'change']
			}
		],
		contactWx: [{
				type: 'string',
				required: true,
				message: '请输入微信号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})$/,
				// 正则检验前先将值转为字符串
				required: true,
				message: '微信号格式错误',
				trigger: ['blur', 'change']
			}
		]
	})
	//照片上传

	const fileList1 = ref([]);

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {

		//console.log(fileList1.value)
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'success',
				message: '上传成功',
			});
		});

	};
</script>

<style lang="scss">
	body {
		background-color: #c7eafe;

		.main {
			background-color: #fff;
			width: 93%;

			margin: 0 auto;
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
			box-shadow: 20rpx 20rpx 20rpx 20rpx rgba(0, 0, 0, 0.2);
			border-radius: 20rpx;

			.content {
				padding-left: 15rpx;
				padding-right: 15rpx;
				font-size: 32rpx;
			}
		}
	}
</style>